<template name="luckyThreeD">
	<!-- 福彩3D组件 -->
	<view>
		<view class="content-box">
			<view class="content-box-left" :class="{content_box_color:isState == 1}" @click="clickNavigation(1)">投注
				<view class="content-box_bottom_line" v-if="isState == 1"></view>
			</view>
			<view class="content-box-right" :class="{content_box_color:isState == 0}" @click="clickNavigation(0)">分析
				<view class="content-box_bottom_line" v-if="isState == 0"></view>
			</view>
		</view>

		<view v-if="isState == 1">
			<view class="holder">
				<view class="itemBlock_time">
					<view class="stageNum">第2021057期 </view>
					<view class="endTime">截止时间:<text class="time_fontColor">10小时0分24秒</text></view>
				</view>
				<!--直选普通-->
				<view v-for="(itemData,rows) in  ongradeList" v-if="luckyThreeD_type==1">
					<view class="position_item">{{itemData.position}}(至少选择1个)</view>
					<view class="numberArea">
						<view class="Box_number" v-for="(item ,index) in itemData.lotteryNum" @click="onlotteryNum(rows,index)">
							<view class="number_circular" :class="item.onclick?'number_circular_bg':'number_circular_color'">{{index}}</view>
							{{item.num}}
						</view>
					</view>
				</view>
				<!--组三单式-->
				<view v-for="(itemData,rows) in  group3single" v-if="luckyThreeD_type==2">
					<view class="position_item">{{itemData.title}}</view>
					<view class="numberAreaS">
						<view class="Box_number" v-for="(item ,index) in itemData.iData" @click="onlotteryNum(rows,index)">
							<view class="number_circular" :class="item.onclick?'number_circular_bg':'number_circular_color'">{{index}}</view>
						</view>
					</view>
				</view>
				<!--组三复式-->
				<view v-if="luckyThreeD_type==3">
					<view class="position_item">选择号码(至少选2个号)</view>
					<view class="numberAreaS">
						<view class="Box_number" v-for="(itemData,index) in  group3complex" @click="onlotteryNum(0,index)">
							<view class="number_circular" :class="itemData.onclick?'number_circular_bg':'number_circular_color'">{{index}}</view>
						</view>
					</view>
				</view>
				<!--组6普通-->
				<view v-if="luckyThreeD_type==4">
					<view class="position_item">选择号码(至少选3个号)</view>
					<view class="numberAreaS">
						<view class="Box_number" v-for="(itemData,index) in  group6ordinary" @click="onlotteryNum(0,index)">
							<view class="number_circular" :class="itemData.onclick?'number_circular_bg':'number_circular_color'">{{index}}</view>
						</view>
					</view>
					<view class="group6ordinary_fast">
						<view class="fast_chooseNum">快速选号</view>
						<view class="item_fastChoose" :class="isFastChooseNum==3?'item_fastChoose_color':''" @click="onFastChooseNum(3)">10选8
							陪率1.54 <view class="random_text">随机</view>
						</view>
						<view class="item_fastChoose" :class="isFastChooseNum==2?'item_fastChoose_color':''" @click="onFastChooseNum(2)">10选7
							陪率2.47 <view class="random_text">随机</view>
						</view>
						<view class="item_fastChoose" :class="isFastChooseNum==1?'item_fastChoose_color':''" @click="onFastChooseNum(1)">10选6
							陪率4.32 <view class="random_text">随机</view>
						</view>
						<view class="item_fastChoose" :class="isFastChooseNum==0?'item_fastChoose_color':''" @click="onFastChooseNum(0)">10选5
							陪率8.65 <view class="random_text">随机</view>
						</view>
						<text class="inpPrizeCondition"><text style="color: red;">*</text>中奖条件：所选号含3个开奖号码（不重号）。</text>
					</view>
				</view>
				<view class="betting_statistics flex" v-if="luckyThreeD_type==1">
					共 <view class="betting_Color">{{total1}}</view> 注
					<text class="betting_Color">{{total1*2}}</text> 元，奖金
					<text class="betting_Color">{{bonus1}}</text> 元
				</view>
				<view class="betting_statistics flex" v-if="luckyThreeD_type==2">
					共 <view class="betting_Color">{{total2}}</view> 注
					<text class="betting_Color">{{total2*2}}</text> 元，奖金
					<text class="betting_Color">{{bonus2}}</text> 元
				</view>
				<view class="betting_statistics flex" v-if="luckyThreeD_type==3">
					共 <view class="betting_Color">{{total3}}</view> 注
					<text class="betting_Color">{{total3*2}}</text> 元，奖金
					<text class="betting_Color">{{bonus3}}</text> 元
				</view>
				<view class="betting_statistics flex" v-if="luckyThreeD_type==4">
					共 <view class="betting_Color">{{total4}}</view> 注
					<text class="betting_Color">{{total4*2}}</text> 元，奖金
					<text class="betting_Color">{{bonus4}}</text> 元
				</view>
			</view>


			<view class="foot flex-bc">
				<view class="oper left flex">
					<view class="clear flex" @click="empty()">
						<uni-icons type="trash" size="18" color="#fff" @click="empty()"></uni-icons>
						<text>清空</text>
					</view>
					<view class="flex-c warmming">
						<text>{{selectCondition[(luckyThreeD_type-1)]}}</text>
					</view>
				</view>
				<view class="oper right flex-c">
					<view class="addNum flex-c" @click="fnAddCart()">
						+<text>加入选号</text>
					</view>
					<view class="finish flex-c" @click="fnFinishSelect()">
						<text>完成选号</text>
						<view class="count flex-c" v-if="ShoppingTotal">
							<text>{{ShoppingTotal}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-else class="item_analysis">056期发哥福彩3D预测奖号：近20期奖号 <view class="analysis_bgImg"></view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'luckyThreeD',
		data() {
			return {
				isFastChooseNum: -1, //点击快速选号
				isState: 1,
				group3single: [], //组三单式
				group3complex: [], //组三复式
				group6ordinary: [], //组6普通
				BetsData: [{
					position: "百位区",
					lotteryNum: [1, 88, 63, 42, 33, 22, 22, 22, 5, 12]
				}, {
					position: "十位区",
					lotteryNum: [1, 88, 63, 42, 3, 22, 1, 22, 5, 12]
				}, {
					position: "个位区",
					lotteryNum: [1, 88, 3, 42, 33, 22, 2, 22, 5, 12]
				}],
				//添加了点击前初始状态数据
				ongradeList: [],
				baiArr1: [], //1 选位  2 3组单选  3 3组复选  4 6普通
				shiArr1: [],
				geArr1: [],
				baiArr2: [],
				shiArr2: [],
				baiArr3: [],
				baiArr4: [],
				total1: 0, //总注数   1 选位  2 3组单选  3 3组复选  4 6普通
				bonus1: 0, //奖金
				total2: 0, //总注数
				bonus2: 0, //奖金
				total3: 0, //总注数
				bonus3: 0, //奖金
				total4: 0, //总注数
				bonus4: 0, //奖金
				ShoppingCart: [], //购物车
				ShoppingTotal: 0, //购物车注数 
				selectCondition: ["每位至少选择1个", "选1个单号1个重号", "至少选2个号", "至少选3个号"]
			};
		},
		props: ['luckyThreeD_type', 'obj'],
		created() {
			this.initIsCircular();
		},
		watch: {
			obj() { //名字要和数据名字一致     将数据赋值给购物车
				this.ShoppingCart = this.obj.ShoppingCart;
				this.ShoppingTotal = this.obj.ShoppingTotal;
			}
		},
		methods: {
			onFastChooseNum(index) { //点击快速选号
				this.isFastChooseNum = index;
				this.fnRandom(index + 5); //随机出onclick为true
				this.calculationNotes(); //计算注数
			}, //生成随机数(不重复数组)
			fnRandom(count) { //count  生成的个数并且不重复
				var randomArr = [Math.floor(Math.random() * 10)];
				for (;;) {
					var a = 0;
					var ran = Math.floor(Math.random() * 10);
					for (var n = 0; n < randomArr.length; n++) {
						if (ran == randomArr[n]) {
							a++;
							break;
						}
					}
					if (a == 0) {
						randomArr.push(ran)
					}
					if (count == randomArr.length) {
						break;
					}
				}
				//清空
				this.empty();
				//根据这些数组进行将号标红
				for (var n = 0; n < this.group6ordinary.length; n++) {
					for (var i = 0; i < randomArr.length; i++) {
						if (randomArr[i] == n) {
							this.group6ordinary[n].onclick = true;
							this.baiArr4.push(n)
						}
					}
				}
			},
			clickNavigation(State) {
				this.isState = State;
			},
			//点击圆
			onlotteryNum(rows, index) {
				if (this.luckyThreeD_type == 1) {
					this.ongradeList[rows].lotteryNum[index].onclick = !(this.ongradeList[rows].lotteryNum[index].onclick)
					var onclick = this.ongradeList[rows].lotteryNum[index].onclick;
					this.calculationNotes(rows, index, onclick) //调用注数函数
				} else if (this.luckyThreeD_type == 2) {
					for (var n = 0; n < this.group3single[0].iData.length; n++) { //不能选相同元素 
						if (rows == 0) {
							if (this.group3single[1].iData[n].onclick && n == index) {
								return;
							}
						}
						if (rows == 1) {
							if (this.group3single[0].iData[n].onclick && n == index) {
								return;
							}
						}
					}
					for (var i = 0; i < this.group3single.length; i++) {
						for (var n = 0; n < this.group3single[i].iData.length; n++) {
							if (rows == i && index == n) {
								var on = this.group3single[rows].iData[index].onclick
								this.group3single[rows].iData[index].onclick = !(on)
							} else if (rows == i && index != n) {
								this.group3single[i].iData[n].onclick = false;
							}
						}
					}
					var onclick = this.group3single[rows].iData[index].onclick;
					this.calculationNotes(rows, index, onclick) //调用注数函数
				} else if (this.luckyThreeD_type == 3) {
					this.group3complex[index].onclick = !(this.group3complex[index].onclick)
					var onclick = this.group3complex[index].onclick;
					this.calculationNotes(rows, index, onclick) //调用注数函数
				} else {
					this.isFastChooseNum = -1;
					let count = 0;
					for (var n = 0; n < this.group6ordinary.length; n++) {
						if (this.group6ordinary[n].onclick) {
							count++;
						}
					}
					if (count < 9) {
						this.group6ordinary[index].onclick = !(this.group6ordinary[index].onclick)
					}
					if (count == 9) {
						if (this.group6ordinary[index].onclick) {
							this.group6ordinary[index].onclick = false;
						}
					}
					var onclick = this.group6ordinary[index].onclick;
					this.calculationNotes(rows, index, onclick) //调用注数函数
				}
			},
			initIsCircular() { //初始化点击圆的状态
				var data = [];
				this.BetsData.forEach(item => {
					let lott = item.lotteryNum;
					var lottery = []
					for (var i = 0; i < lott.length; i++) {
						lottery.push({
							num: lott[i],
							onclick: false
						})
					}
					data.push({
						position: item.position,
						lotteryNum: lottery
					})
				})
				this.ongradeList = data;
				//组三单式
				var itemData = [];
				for (var i = 0; i < 2; i++) {
					var iData = []
					for (var n = 0; n < 10; n++) {
						iData.push({
							num: n,
							onclick: false
						})
					}
					var title = "出现1次的号码"
					if (i == 0) {
						title = "出现2次的号码"
					}
					itemData.push({
						title: title,
						iData: iData
					})
				}
				this.group3single = itemData
				//组三复式
				itemData = [];
				for (var n = 0; n < 10; n++) {
					itemData.push({
						num: n,
						onclick: false
					})
				}
				this.group3complex = itemData
				//组6普通
				itemData = [];
				for (var n = 0; n < 10; n++) {
					itemData.push({
						num: n,
						onclick: false
					})
				}
				this.group6ordinary = itemData
			}, //计算注数(票钱 奖金)
			calculationNotes(rows, index, onclick) {
				if (this.luckyThreeD_type == 1) {
					switch (rows) {
						case 0:
							if (onclick) {
								this.baiArr1.push(index)
							} else {
								let pos = this.baiArr1.indexOf(index);
								this.baiArr1.splice(pos, 1);
							}
							break;
						case 1:
							if (onclick) {
								this.shiArr1.push(index)
							} else {
								let pos = this.shiArr1.indexOf(index);
								this.shiArr1.splice(pos, 1);
							}
							break;
						case 2:
							if (onclick) {
								this.geArr1.push(index)
							} else {
								let pos = this.geArr1.indexOf(index);
								this.geArr1.splice(pos, 1);
							}
							break;
						default:
							break;
					}
					this.total1 = this.baiArr1.length * this.shiArr1.length * this.geArr1.length; //总注数
					if (this.total1) {
						this.bonus1 = 1040
					} else {
						this.bonus1 = 0
					}
				}
				if (this.luckyThreeD_type == 2) {
					var num1 = -1;
					var num2 = -1;
					for (var n = 0; n < this.group3single.length; n++) {
						for (var i = 0; i < this.group3single[n].iData.length; i++) {
							if (n == 0 && this.group3single[0].iData[i].onclick) {
								num1 = i;
								this.baiArr2=[]
								this.baiArr2.push(num1);
							}
							if (n == 1 && this.group3single[1].iData[i].onclick) {
								num2 = i;
								this.shiArr2=[]
								this.shiArr2.push(num2);
							}
						}
					}
					
					if (num1 != -1 && num2 != -1) {
						this.total2 = 1; //总注数 
						this.bonus2 = 346;
					} else {
						this.total2 = 0; //总注数
						this.bonus2 = 0;
					}
				}
				if (this.luckyThreeD_type == 3) {
					var count = 0;
					this.group3complex.map(i => {
						if (i.onclick) {
							count++;
						}
					})
					if (count > 1) {
						this.total3 = count * (--count); //总注数
						this.bonus3 = 346;
					} else {
						this.total3 = 0; //总注数
						this.bonus3 = 0;
					}

					if (onclick) {
						this.baiArr3.push(index)
					} else {
						let pos = this.baiArr3.indexOf(index);
						this.baiArr3.splice(pos, 1);
					}




				}
				if (this.luckyThreeD_type == 4) {
					var notesArr = [1, 4, 10, 20, 35, 56, 84];
					var count = 0;
					for (var i = 0; i < this.group6ordinary.length; i++) {
						if (this.group6ordinary[i].onclick) {
							count++;
						}
					}
					if (count > 2) {
						this.total4 = notesArr[count - 3]; //总注数
						this.bonus4 = 173;
					} else {
						this.total4 = 0; //总注数
						this.bonus4 = 0;
					}

				}
			},
			empty() { //清空  
				if (this.luckyThreeD_type == 1) {
					this.total1 = 0
					this.bonus1 = 0
					this.baiArr1 = []
					this.shiArr1 = []
					this.geArr1 = []
					this.ongradeList.forEach(item => {
						item.lotteryNum.forEach(i => {
							i.onclick = false;
						})
					})
				} else if (this.luckyThreeD_type == 2) {
					this.group3single.forEach(item => {
						item.iData.forEach(i => {
							i.onclick = false;
						})
					})
					this.total2 = 0
					this.bonus2 = 0
					this.baiArr2 = []
					this.shiArr2 = []
				} else if (this.luckyThreeD_type == 3) {
					this.total3 = 0
					this.bonus3 = 0
					this.baiArr3 = []
					this.group3complex.forEach(item => item.onclick = false)
				} else if (this.luckyThreeD_type == 4) {
					this.total4 = 0
					this.bonus4 = 0
					this.baiArr4 = []
					this.group6ordinary.forEach(item => item.onclick = false)
				}
			}, //加入选号
			fnAddCart() {
				if (this.luckyThreeD_type == 1) {
					if (this.total1 <= 0) {
						uni.showToast({
							title: '至少要选一注',
							icon: 'none'
						})
						return;
					} else {
						this.ShoppingCart.push({
							luckyThreeD_type: this.luckyThreeD_type,
							bai: this.baiArr1,
							shi: this.shiArr1,
							ge: this.geArr1
						})
						this.ShoppingTotal = this.ShoppingTotal + this.total1;
						this.empty();
						this.ShoppingCart.forEach(i => console.log(i))

					}
				}
				if (this.luckyThreeD_type == 2) {
					if (this.total2 <= 0) {
						uni.showToast({
							title: '至少要选一注',
							icon: 'none'
						})
						return;
					} else {
						this.ShoppingCart.push({
							luckyThreeD_type: this.luckyThreeD_type,
							bai: this.baiArr2,
							shi: this.shiArr2
						})
						this.ShoppingTotal = this.ShoppingTotal + this.total2;
						this.empty();
						this.ShoppingCart.forEach(i => console.log(i))
					}
				}
				if (this.luckyThreeD_type == 3) {
					if (this.total3 <= 0) {
						uni.showToast({
							title: '至少要选一注',
							icon: 'none'
						})
						return;
					} else {
						this.ShoppingCart.push({
							luckyThreeD_type: this.luckyThreeD_type,
							bai: this.baiArr3
						})
						this.ShoppingTotal = this.ShoppingTotal + this.total3;
						this.empty();
						this.ShoppingCart.forEach(i => console.log(i))
					}
				}
				if (this.luckyThreeD_type == 4) {
					if (this.total4 <= 0) {
						uni.showToast({
							title: '至少要选一注',
							icon: 'none'
						})
						return;
					} else {
						this.ShoppingCart.push({
							luckyThreeD_type: this.luckyThreeD_type,
							bai: this.baiArr4
						})
						this.ShoppingTotal = this.ShoppingTotal + this.total4;
						this.empty();
						this.ShoppingCart.forEach(i => console.log(i))
					}
				}

			},
			fnFinishSelect() { //完成选号
				this.fnAddCart();
				if (this.ShoppingTotal <= 0) {
					uni.showToast({
						title: '至少要选一注',
						icon: 'none'
					})
					return;
				} else { //去投注界面
					//封装投注数据
					var data = {
						ShoppingCart: this.ShoppingCart,
						ShoppingTotal: this.ShoppingTotal
					}
					data = JSON.stringify(data)

					//  ?data=${data}&bet_type=${this.type_id}

					//   this.ShoppingCart=JSON.stringify(this.ShoppingCart);
					// console.log(this.type_id);
					uni.navigateTo({
						url: `/pages/bets/betsLuckyThreeD?data=${data}&bet_type=${this.type_id}`
					})
				}


			}




		}

	}
</script>

<style lang="scss" scoped>
	.group6ordinary_fast {
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;
		padding: 20rpx;

		.item_fastChoose_color {
			background-color: red;
			color: #fff;
		}

		.random_text {
			box-sizing: border-box;
			padding-right: 20rpx;
			float: right;
			color: #fff;
		}

		.fast_chooseNum {
			font-size: 32rpx;
		}


		.inpPrizeCondition {
			font-size: 22rpx;
			box-sizing: border-box;
			padding-left: 20rpx;
			color: rgb(51, 102, 205);
		}

	}

	.item_fastChoose {
		font-size: 26rpx;
		width: 100%;
		border: 1px solid #eee;
		border-radius: 20rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		margin-top: 40rpx;
		color: #666;
	}


	.analysis_bgImg {
		margin-top: 30rpx;
		width: 12rpx;
		float: right;
		height: 22rpx;
		background-image: url(../../static/luckyThreeD/enter.png);
		background-repeat: no-repeat;
		background-size: 12rpx 22rpx;
	}

	.item_analysis {
		width: 100%;
		line-height: 90rpx;
		height: 90rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;

	}

	.line_box_color {
		background-color: #fff;
	}

	.content-box-left,
	.content-box-right {
		position: relative;
		flex: 2;
		line-height: 74rpx;
		text-align: center;
		color: #333;
	}

	.content_box_color {
		color: #F22F29;
	}




	.betting_Color {
		color: #F22F29;
		padding: 0 10rpx;
	}

	.betting_statistics {
		width: 100%;
		box-sizing: border-box;
		padding-left: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666;
		position: fixed;
		left: 0;
		bottom: 160rpx;
	}

	.holder {
		width: 100%;
		position: absolute;
		top: 162rpx;
		bottom: 136rpx;
	}

	.number_circular_bg {
		color: #fff;
		background-color: #F22F29;
	}

	.number_circular_color {
		color: #F22F29;
		background-color: #fff;
	}

	.number_circular {
		width: 100%;
		height: 64rpx;
		border-radius: 50%;
		line-height: 64rpx;
		border: 1px solid #DDDDDD;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		margin: 20rpx auto;
	}

	.numberArea {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 153rpx;
		padding-left: 20rpx;
		background-color: #fff;
	}

	.numberAreaS {
		height: 108rpx;
		position: relative;
		box-sizing: border-box;
		width: 100%;
		padding-left: 20rpx;
		background-color: #fff;
	}


	.Box_number {
		width: 64rpx;
		float: left;
		margin-right: 8rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999;
		text-align: center;
	}

	.position_item {
		width: 100%;
		height: 70rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		padding-left: 20rpx;
		background: #fff;
		line-height: 70rpx;
	}

	.time_fontColor {
		color: #F22F29;
	}

	.stageNum,
	.endTime {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666;
		line-height: 74rpx;
	}

	.itemBlock_time {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		margin-bottom: 8rpx;
		box-sizing: border-box;
		width: 100%;
		height: 74rpx;
		background: #FFFFFF;
		padding: 0 20rpx;
	}

	.content-box_bottom_line {
		position: absolute;
		width: 250rpx;
		height: 4rpx;
		background: #ED555E;
		border-radius: 2rpx;
		bottom: 0;
		left: 63rpx;
	}

	.content-box {
		position: relative;
		width: 100%;
		height: 74rpx;
		background: #fff;
		display: flex;
	}

	.foot {
		position: fixed;
		padding: 0 20rpx;
		box-sizing: border-box;
		bottom: 0;
		left: 0;
		height: 136rpx;
		background: #1C0403;
		width: 100%;
		color: #fff;

		.oper {
			flex: 1;
			font-size: 24rpx;
			color: #fff;

			.clear {
				padding: 0 20rpx;
				flex-direction: column;
				align-items: center;
			}

			.warmming {
				padding: 0 20rpx;

				.betsNum {
					flex-direction: column;
					align-items: center;
				}
			}

			.addNum,
			.finish {
				width: 160rpx;
				height: 74rpx;
			}

			.finish {
				background: #F22F29;
				border-radius: 0px 37rpx 37rpx 0px;
				font-size: 28rpx;
				position: relative;

				.count {
					font-size: 20rpx;
					border-radius: 50%;
					border: 1rpx solid #fff;
					background: #F22F29;
					position: absolute;
					right: -4rpx;
					top: -10rpx;
					padding: 2rpx 8rpx;
					box-sizing: border-box;
				}
			}

			.addNum {
				background: #32353E;
				border-radius: 37rpx 0px 0px 37rpx;
				color: #ED555E;
				font-size: 32rpx;

				text {
					font-size: 28rpx;
				}
			}

		}
	}
</style>
